<!-- wxml -->
<template>
	<view class="content">
	
	<u-button text="月落" type="primary"></u-button>
		<view class="text-area">
			<!--#ifdef MP-WEIXIN   -->
			<text class="title">微信小程序</text>
			<!-- #endif -->
			<!--#ifdef H5   -->
			<text class="title">h5页面</text>		
			<!-- #endif -->
		</view>
		
		<view class="hr"></view>
		<view class="title">{{title}}</view>
		<view class="hr"></view>
		<view class="a"></view>
			<view class="hr"></view>
		<view class="b"></view>
			<view class="hr"></view>
		<view class="c"></view>
		<view class="hr"></view>
		<ul>
			<li>
				<a href="#">黄色</a>
				<a href="#">蓝色</a>
			</li>
		</ul>
			
		
			
	</view>
</template>
<!-- js -->
<script>
	export default {
		data() {
			return {
				// #ifndef MP-WEIXIN
				title: 'Hello h5',
				// #endif
				// #ifdef MP-WEIXIN
				title: 'Hello 微信小程序',
				// #endif
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<!-- wxss -->
<style lang="less">
	// less 定义变量
	@bg:yellow;
    .hr {
		height: 2rpx;
		background-color: #ccc;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}
    /* #ifdef MP-WEIXIN */
	.title {
		font-size: 36rpx;
		color: blue;
	}
	/* #endif */
	/* #ifdef H5 */
	.title {
		font-size: 36rpx;
		color: orange;
	}
	/* #endif */
	.a {
		width: 300rpx;
		height: 300rpx;
		background-color: @bg;
	}
	
	.b {
		width: 300rpx;
		height: 300rpx;
		background-color: @bg;
	}
	
	.c {
		width: 300rpx;
		height: 300rpx;
		background-color: @bg;
	}
	
	// ul li a:nth-child(1) {
	// 	color: yellow;
	// }
	
	// ul li a:nth-child(2) {
	// 	color: blue;
	// }
	ul {
		li {
		    a {
				// & 表示上层的样式
				&:nth-child(1) {
					color: red;
				}
				&:nth-child(2) {
					color: blue;
					
				}
			}
		}
	}
</style>
